<template>
  <div class="status-container">
    <div class="chart">
      <base-echart
        ref="chartRef"
        :show-no-data="true"
        :options="state.alertListOption"
        height="180"
      />
    </div>
    <div class="alert-lv">
      <div class="alert-lv-item" v-for="(item, index) in resData">
        <div class="alert-lv-item-icon">
          <img
            :src="requireImgUrl('image/dashboard', item.name)"
            alt=""
            class="alert-icon"
          />
        </div>
        <div class="alert-item-info">
          <div
            class="alert-lv-item-name"
            :style="`color:${textColor(item.name)}`"
          >
            {{ item.name }}
          </div>
          <div class="alert-lv-item-value" v-if="item.value">
            <div
              class="info-percentage"
              :style="`color:${valueColor(item.name)}`"
            >
              {{ percentage(item.value) }}
            </div>
            <div class="info-value">
              {{ item.value }}
            </div>
          </div>
          <div class="nodata" v-else>
            暂无数据
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  reactive,
  ref,
  computed,
  onMounted,
  nextTick,
  watch,
  onUnmounted,
} from "vue";
import { alertListOption } from "./config/config";
import { requireImgUrl } from "@/utils/localurl/metaUrl";

import { NewGeneral } from "@/api/screen/equipment";
import { cloneDeep } from "lodash-es";
import { useIds } from "@/stores/screen/ids";
const { getsessionStorage } = useIds();
const state = reactive<any>({ alertListOption });
const initDataOption = {
  // legend: { data: [] as any },
  series: { data: [] as any },
  title: { subtext: "" as any },
};
const alertType = ref([
  {
    name: "一般",
    value: 0,
    alertGrade: "INFO",
    code: "AI_EVENT_MESSAGE_DETAIL_TODAY_FOR_STATUS",
    key: "AI_EVENT_MESSAGE_DETAIL_TODAY_FOR_STATUS_INFO",
  },
  {
    name: "告警",
    value: 0,
    alertGrade: "WARN",
    code: "AI_EVENT_MESSAGE_DETAIL_TODAY_FOR_STATUS",
    key: "AI_EVENT_MESSAGE_DETAIL_TODAY_FOR_STATUS_WARN",
  },
  {
    name: "紧急",
    value: 0,
    alertGrade: "ERROR",
    code: "AI_EVENT_MESSAGE_DETAIL_TODAY_FOR_STATUS",
    key: "AI_EVENT_MESSAGE_DETAIL_TODAY_FOR_STATUS_ERROR",
  },
]);
const config = ref([
  {
    code: "AI_EVENT_MESSAGE_DETAIL_TODAY_FOR_STATUS",
    params: {
      equipmentIds: getsessionStorage(),

      handleStatus: "0",
      alertGrade: "INFO",
    },
    key: "AI_EVENT_MESSAGE_DETAIL_TODAY_FOR_STATUS_INFO",
  },
  {
    code: "AI_EVENT_MESSAGE_DETAIL_TODAY_FOR_STATUS",
    params: {
      equipmentIds: getsessionStorage(),

      handleStatus: "0",
      alertGrade: "WARN",
    },
    key: "AI_EVENT_MESSAGE_DETAIL_TODAY_FOR_STATUS_WARN",
  },
  {
    code: "AI_EVENT_MESSAGE_DETAIL_TODAY_FOR_STATUS",
    params: {
      equipmentIds: getsessionStorage(),

      handleStatus: "0",
      alertGrade: "ERROR",
    },
    key: "AI_EVENT_MESSAGE_DETAIL_TODAY_FOR_STATUS_ERROR",
  },
]);

const config1 = ref([
  {
    code: "AI_EVENT_MESSAGE_DETAIL_TODAY_FOR_STATUS",
    params: {
      equipmentIds: getsessionStorage(),

      handleStatus: "1",
      alertGrade: "INFO",
    },
    key: "AI_EVENT_MESSAGE_DETAIL_TODAY_FOR_STATUS_INFO",
  },
  {
    code: "AI_EVENT_MESSAGE_DETAIL_TODAY_FOR_STATUS",
    params: {
      equipmentIds: getsessionStorage(),

      handleStatus: "1",
      alertGrade: "WARN",
    },
    key: "AI_EVENT_MESSAGE_DETAIL_TODAY_FOR_STATUS_WARN",
  },
  {
    code: "AI_EVENT_MESSAGE_DETAIL_TODAY_FOR_STATUS",
    params: {
      equipmentIds: getsessionStorage(),

      handleStatus: "1",
      alertGrade: "ERROR",
    },
    key: "AI_EVENT_MESSAGE_DETAIL_TODAY_FOR_STATUS_ERROR",
  },
]);

const percentage = (value: number) => {
  return ((value / totalData.value) * 100).toFixed(2) + "%";
};

const textColor = (name) => {
  switch (name) {
    case "告警总数":
      return "rgba(223, 223, 223, 1)";

    case "一般":
      return "rgba(156, 225, 255, 1)";
    case "告警":
      return "rgba(255, 240, 187, 1)";
    case "紧急":
      return "rgba(255, 196, 196, 1)";
  }
};

const valueColor = (name) => {
  switch (name) {
    case "一般":
      return "rgba(0, 148, 255, 1)";
    case "告警":
      return "rgba(255, 201, 64, 1)";
    case "紧急":
      return "rgba(229, 60, 60, 1)";
  }
};

const resData = ref([]);
const totalData = ref(0);
const renderKey = async () => {
  totalData.value = 0;
  resData.value = [];

  let { code, data } = (await NewGeneral(config.value)) as any;
  if (code == 200) {
    alertType.value.forEach((item) => {
      if (!data[item.key]) {
        if (item.name != "全部") {
          resData.value.push({ name: item.name, value: 0 });
        }
      } else {
        item.value = data[item.key].data;
        if (item.name != "全部") {
          resData.value.push({ name: item.name, value: data[item.key].data });
        } else {
        }
      }
    });
    // if (resData.value.length == 0) {

    // } else {
    //   resData.value.forEach((item) => {
    //     totalData.value += item.value;
    //   });
    // }
  }
  let data1 = (await NewGeneral(config1.value)).data;
  let resData1 = [];

  alertType.value.forEach((item) => {
    if (!data1[item.key]) {
      if (item.name != "全部") {
        resData1.push({ name: item.name, value: 0 });
      }
    } else {
      item.value = data1[item.key].data;
      if (item.name != "全部") {
        resData1.push({ name: item.name, value: data1[item.key].data });
      } else {
      }
    }
  });
  // 合并两个数组的相同项
  for (let i = 0; i < resData1.length; i++) {
    for (let j = 0; j < resData.value.length; j++) {
      if (resData1[i].name == resData.value[j].name) {
        resData.value[j].value += resData1[i].value;
      }
    }
  }
  if (resData.value.length == 0) {
    totalData.value;
  } else {
    resData.value.forEach((item) => {
      totalData.value += item.value;
    });
  }

  formatOptions(resData.value, totalData.value);
};
const formatOptions = (data: any, total) => {
  const dataOption = cloneDeep(initDataOption);
  data.forEach((item: any) => {
    dataOption.series.data.push({
      name: item.name,
      value: item.value,
    });
  });
  dataOption.series.data = data;
  dataOption.title.subtext = "" + total;
  nextTick(() => {
    state.alertListOption = dataOption;
  });
};
const pollingTimer = ref();
const setPollingTimer = () => {
  pollingTimer.value && clearInterval(pollingTimer.value);
  pollingTimer.value = setInterval(() => {
    renderKey();
  }, 30000);
};
onUnmounted(() => {
  pollingTimer.value && clearInterval(pollingTimer.value);
});
onMounted(() => {
  renderKey();
  setPollingTimer();
});
// const alertTotal = ref(1652)
</script>

<style scoped lang="scss">
.status-container {
  padding: 10px;
  display: flex;
  flex-direction: column;
  height: 100%;
  font-weight: 600;

  .alert-lv {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;

    & > div {
      width: 80%;
      display: flex;
      margin-bottom: clamp(0.938rem, 0.78vw, 1.875rem);

      .nodata {
        color: #ffffff;
      }

      .alert-lv-item-icon {
        flex: 0.2;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        & > img {
          width: clamp(1.5rem, 1.25vw, 3rem);
          height: clamp(1.5rem, 1.25vw, 3rem);
        }
      }

      .alert-item-info {
        flex: 0.8;
        display: flex;

        align-items: center;

        .alert-lv-item-name {
          flex: 0.2;
          color: rgba(255, 255, 255, 1);
          margin-right: clamp(1.25rem, 1.04vw, 2.5rem);
        }

        .alert-lv-item-value {
          flex: 0.8;
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;

          .info-value {
            font-size: clamp(2rem, 1.67vw, 4rem);
            font-family: DS-Digital, DS-Digital;
            color: rgba(255, 255, 255, 1);
          }

          & > div {
            margin-right: clamp(1.25rem, 1.04vw, 2.5rem);
          }

          .info-percentage {
            height: 100%;
            display: flex;
            align-items: center;
          }
        }
      }
    }
  }
}
</style>
